
var classes = new Array("风景","人像","动物","植物","静物","设计");
var imgNames = new Array("sightseeing.jpg","people.jpg","animal.jpg","plant.jpg","static.jpg","design.jpg")
var backgroundColors = new Array("red","green","black","blue","white","orange");

//importScripts("js/jquery-3.3.1.min.js");

function buildClassItem(className, imgName)
{
	var list = document.getElementById("id_classesList");
	
	var str = '<li class="cl_classItem mui-table-view-cell  mui-media mui-col-xs-4 mui-col-sm-3" id="id_'+className+'Item">'+
				'<div class="mui-card" >'+
					'<div class=" mui-card-header mui-card-media cl_cardImg" id="id_'+className+'" style="background-image: url(classifyPages/cardImg/'+imgName+');">'+
						'<div class="cl_cardTitle" align="center"><b><font size="6" face=arial black>'+className+'</font></b></div>'+
					'</div>'+
				'</div>'+
				'</li>';

	console.log("build "+className+":"+str);


	return str;
}

function doTest(){
	console.log("doTest:"+document.getElementById("id_classesBox").innerHTML);
	for (var i = 0; i < classes.length; i++) {
		var mId = "id_"+classes[i];
		var cItem = document.getElementById(mId);
		console.log("item id:"+mId);
		var st = cItem.style;
		console.log([i]+":"+st.backgroundImage)

	}
}

function loadClassesBox()
{
	
	mui.toast('加载',{ duration:'short', type:'div' }) ;
	var box = document.getElementById("id_classesList");
	var str = "";
	for (var i = 0; i < classes.length; i++) {
		str += buildClassItem(classes[i],imgNames[i]);

	}
	box.innerHTML += str;
	
	for (var i=0; i < classes.length; i++) {
		
		document.getElementById("id_"+classes[i]).addEventListener("tap",function(e){
			var Id =  this.id;
			var className =Id.substring(3,Id.length+1);
			mui.toast('进入'+className+'类页面',{ duration:'short', type:'div' }) ;
			mui.openWindow({
			    url:"/classifyPages/specific.html",
			    id:'specificPage',
			    styles:{
			      top:'0',//新页面顶部位置
			      bottom:'0',//新页面底部位置
			      width:'100%',//新页面宽度，默认为100%
			      height:'100%',//新页面高度，默认为100%
			    },
			    extras:{
			   	  className:className
			   	  
			    },
			    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
			    show:{
			      autoShow:true,//页面loaded事件发生后自动显示，默认为true
			    },
			    waiting:{
			      autoShow:true,//自动显示等待框，默认为true
			      title:'className',//等待对话框上显示的提示内容
			      options:{
			      }
			    }
			})
		});		
	}
	doTest();
}

